// out: ../../css/hero/hero.css

// 引入基本样式
@import url("../base/base.less");
// 导入版本，英雄，壁纸的公共样式
@import url("../common/servisionHeroWallpaper.less");

// 扫描二维码下载
@import url("../common/down.less");


.container {
  width: 900px;
  margin: 0 auto;
  font-size: 12px;

  .herolist-title {
    margin-top: 37px;
    padding-left: 18px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: bold;
    background: url("../../assets/hero/icon_hero.webp") no-repeat left/contain;
  }

  .herolist-nav {
    margin-top: 16px;
    height: 16px;
    color: #4B4B4B;
    display: flex;

    // justify-content: ;
    li {
      flex: 1;
      text-align: center;
      height: 20px;
      line-height: 16px;
      cursor: pointer;
      border-bottom: 1px solid #D4D4D4;
    }

    .active {
      color: #3589DD;
      border-bottom: 2px solid #3589DD;
      border-radius: 0 0 2px 2px;
    }
  }

  .herolist-box {
    padding: 26px 21px;
    // height: auto;
    // 英雄介绍内容
    .herolist-hero {
      background-color: #EFEFEF;
      height: 79px;
      display: block;
      // 人物筛选
      .herolist-types{
        display: flex;
        height: 100%;
        // 左侧
        .types-left{
          width: 60px;
          // height: 39px;
          background-color: #2C88E2;
          span{
            display: block;
            height: 39px;
            line-height: 39px;
            text-align: center;
            color: #fff;
          }
        }
        // 中间
        .types-center{
         padding-left: 12px;
         
         p{
            // padding: 12px 0;
            height: 39px;
            line-height: 39px;
            span{
              display: inline-block;
              padding-right: 11px;
              width: 78px;
              input{
                accent-color: #2C88E2;
                border: 1px solid #B3B3B3;
                vertical-align: middle;
              }
            }
         }
        }
        // 右侧
       .types-right{
         margin-top: 39px;
         width: 172px;
         height: 32px;
         padding: 7px;
         border: 1px solid #D2D2D2;
         input{
           width: 85%;
           height: 12px;
           border: none;
           background-color: #EFEFEF;
           border-right: 1px solid #D2D2D2;
           &::placeholder{
             font-size: 10px;
             color: #B3B3B3;
           }
         }
         a{
          display: inline-block;
          width: 10%;
          height: 20px;
          
          padding-left: 6px;
          vertical-align: middle;
          background: url("../../assets/hero/vl_search_icon.webp") no-repeat center/10px;
         }
       }
      }
      // 游戏人物
      .herolist-content{
        margin-top: 30px;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        
        li{
          text-align: center;
          width: 65px;
          height: 79px;
          margin-right: 20px;
          margin-bottom: 25px;
          img{
            display: block;
            width: 62px;
            height: 62px;
            border: 1px solid #258DF2;
            border-radius: 7px 0 7px 0;
          }
          span{
            font-size: 11px;
            display: block;
            height: 16px;
            width: 90px;
            text-align: center;
            margin-left: -10px;
            line-height: 16px;
          }
        }
      }
    }
    // 局内道具内容
    .herolist-prop {
      display: none;
      accent-color: #2C88E2;
      // 道具筛选
      .prop-types{
        p{
          span{
            width: 100px;
            display: inline-block;

            input{
              accent-color: #2C88E2;
              border: 1px solid #B3B3B3;
              vertical-align: middle;
            }
            &:nth-of-type(1){
              width: 80px; 
            }
          }
          &:nth-of-type(2){
            span{
              &:nth-of-type(n+2){
                width: 80px;
              }
            }
          }
        }
      }
      // 道具内容
     .prop-content{
        margin-top: 30px;
        display: flex;  
        flex-wrap: wrap;
        li{
          position: relative;
          width: 65px;
          height: 78px;
          margin-right: 20px;
          margin-bottom: 25px;
          text-align: center;
          img{
            display: block;
            width: 62px;
            height: 62px;
          }
          span{
            font-size: 11px;
            display: block;
            height: 16px; 
          }
          .detail{
            
            position: absolute;
            display: flex;
            display: none;
            justify-content: center;
            align-items: center;
            left: 63px;
            top: -37px;
            height: 140px;
            width: 180px;
            z-index: 1;
            background: rgba(0, 0, 0, 0.8);
            .detail-img{
              display: block;
              width: 60px;
              height: 104px;
              span{
                padding-top: 10px;
                display: block;
                width: 70px;
                color: #48a7f7;
              }
            }
            .detail-text{
              width: 60px;
              height: 104px; 
              h1{
                font-size: 14px;
                font-weight: bold;
                color: #37fd3b;
              }
              p{
                width: 88px;
                color: #dc9e30;
              }
            }
          }
          &:hover{
            .detail{
              display: flex;
              // display: block;
              .detail-img{
                display: block;
                width: 60px;
                height: 104px;
                span{
                  padding-top: 10px;
                  display: block;
                  width: 70px;
                  color: #48a7f7;
                }
              }
              .detail-text{
                width: 60px;
                height: 104px; 
                h1{
                  font-size: 14px;
                  font-weight: bold;
                  color: #37fd3b;
                }
                p{
                  width: 88px;
                  color: #dc9e30;
                }
              }
            } 
          }
        }
     }
    }
    // 召唤师技能内容
    .herolist-skill {
      margin-top: 21px;
      padding: 0 34px 0 0px;
      display: none;
      height: 380px;
      
      .skill-types{
        float: left;
        display: flex;
        // border-bottom: ;
        width: 45%;
        flex-wrap: wrap;
        // height: 100%;
        li{
          width: 87px;
          height: 90px;
          text-align: center;
          margin-bottom: 16px;
          img{
            display: inline-block;
            height: 66px;
            width: 66px;
            
            border-radius: 50%;
          }
          span{
            display: block;
          }
          .active-img{
            border: 1px solid #00A383;
          }
          .active-span{
            color: #00A383;
          }
        }
      }
      .skill-content{
        float: right;
        width: 423px;
        height: 252px;
        color: #9A9A9A;
        h1{
          font-size: 12px;
          font-weight: bold;
          color: #00a383;
        }
        p{
          height: 30px;
          line-height: 30px;
          &:nth-of-type(2){
            color: #333;
          }
        }
      }
    }
  }

}